<template>
  <view
    class="card-item"
    :style="{
      backgroundColor: colorList[parseInt(datas.state) - 1].bgColor,
    }"
  >
    <view class="card-left">
      <view
        class="decorate"
        :style="{
          backgroundColor: colorList[parseInt(datas.state) - 1].decorate,
        }"
      >
        送到家
      </view>
      <view class="card-title">{{ datas.name || "-" }}</view>
      <view class="card-time">
        {{
          datas.endtime == 0
            ? "永久有效"
            : `过期时间：${
                $TimeFormat(Number(new Date(datas.endtime)), "yyyy-mm-dd") || "-"
              }`
        }}
      </view>
    </view>
    <view
      class="card-right"
      :style="{
        borderColor: colorList[parseInt(datas.state) - 1].border,
      }"
    >
      <view
        :style="{
          color: colorList[parseInt(datas.state) - 1].price,
        }"
      >
        {{
          datas.type == "discount" ? `${datas.discount || 0}折` : `￥${datas.price || 0}`
        }}
      </view>
      <view
        :style="{
          color: colorList[parseInt(datas.state) - 1].text,
        }"
      >
        {{ datas.type_text || "优惠券" }}
      </view>
      <view
        class="card-btn"
        :style="{
          backgroundColor: colorList[parseInt(datas.state) - 1].button,
        }"
        @click="handleUse"
      >
        {{
          parseInt(datas.state) == 1
            ? "使用"
            : parseInt(datas.state) == 2
            ? "已使用"
            : "已过期"
        }}
      </view>
    </view>
    <view class="usered">
      <u-image
        v-if="parseInt(datas.state) == 2"
        :src="require('@/static/my/usered.png')"
        width="200rpx"
        height="200rpx"
      />
    </view>
    <view class="timeout">
      <u-image
        v-if="parseInt(datas.state) == 3"
        :src="require('@/static/my/timeout.png')"
        width="140rpx"
        height="86rpx"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    datas: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 状态颜色
      colorList: [
        {
          decorate: "#3ba199",
          bgColor: "#cee7e5",
          button: "#3ba199",
          price: "#3BA199",
          text: "#3BA199",
          border: "#3BA19966",
        },
        {
          decorate: "#3ba199",
          bgColor: "#cee7e5",
          button: "#85C4BF",
          price: "#3BA199",
          text: "#3BA199",
          border: "#3BA19966",
        },
        {
          decorate: "#BABABA",
          bgColor: "#F5F5F5",
          button: "#979797",
          price: "#555555",
          text: "#979797",
          border: "#9797974D",
        },
      ],
    };
  },
  methods: {
    // 去使用
    handleUse() {
      if (this.datas.state == "1") {
        this.$emit("click", this.datas);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card-item {
  height: 204rpx;
  width: 100%;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 20rpx 0;
  position: relative;
  display: flex;
  &::before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    width: 36rpx;
    height: 36rpx;
    top: -18rpx;
    border-radius: 50%;
    right: 204rpx;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    width: 36rpx;
    height: 36rpx;
    bottom: -18rpx;
    border-radius: 50%;
    right: 204rpx;
  }
  .card-left {
    flex: 1;
    .decorate {
      position: absolute;
      top: 18rpx;
      left: 0;
      color: #fff;
      font-size: 24rpx;
      padding: 4rpx 22rpx;
      border-radius: 0 22rpx 22rpx 0;
    }
    .card-title {
      position: absolute;
      top: 80rpx;
      left: 30rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #222;
    }
    .card-time {
      position: absolute;
      bottom: 34rpx;
      left: 30rpx;
      font-size: 24rpx;
      color: #979797;
    }
  }
  .card-right {
    width: 226rpx;
    height: 100%;
    display: flex;
    text-align: center;
    box-sizing: border-box;
    flex-direction: column;
    padding: 20rpx;
    align-items: center;
    justify-content: space-around;
    border-left: 4rpx dashed;
    > view:nth-child(1) {
      font-weight: 600;
    }
    > view:nth-child(2) {
      font-size: 24rpx;
    }
    .card-btn {
      color: #fff;
      width: 120rpx;
      font-size: 28rpx;
      z-index: 2;
      padding: 12rpx 10rpx;
      border-radius: 30rpx;
    }
  }
  .usered {
    position: absolute;
    top: -26rpx;
    right: -20rpx;
  }
  .timeout {
    position: absolute;
    top: 58rpx;
    right: 178rpx;
  }
}
</style>
